<template>
  <!-- 地图第二级展示 -->
  <div class="mapGaoxinBox" ref="mapComponentRef">
    <img
      class="gaoxinXi"
      src="https://s1.ax1x.com/2023/06/30/pC0HoU1.png"
      alt="" />
    <img
      class="gaoxinNan"
      src="https://s1.ax1x.com/2023/06/30/pC0HT4x.png"
      alt="" />
    <!-- 聚合点 -->
    <div
      v-for="(n, i) in mapGaoxinState.mapDataArr"
      :key="i"
      class="converItem"
      :style="{
        width: `${n.boxWidth}px`,
        height: `${n.boxHeight}px`,
        lineHeight: `${n.boxHeight}px`,
        top: `${n.top}px`,
        left: `${n.left}px`,
        backgroundImage: 'url(' + n.img + ')',
      }"
      @click="goBaseMap(n)">
      {{ n.num }}
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";

// 定义向父组件传值方法
const emits = defineEmits(["nextMap"]);

// 监听鼠标滚轮事件
// if (document.addEventListener) {
//   document.addEventListener("wheel", function (e) {
//     loadWheelFn(e);
//   });
// }
// const loadWheelFn = (e) => {
//   if (e.wheelDelta < 0) {
//     // 鼠标向下滚动
//     // 显示3D地图
//     emits("nextMap", "Go3DMap");
//   }
// };

const mapGaoxinState = reactive({
  mapDataArr: [
    {
      boxWidth: "60",
      boxHeight: "60",
      num: 2,
      img: require("@/assets/screenImg/commonImg/polySecond.gif"),
      left: "550",
      top: "400",
    },
    {
      boxWidth: "50",
      boxHeight: "50",
      num: 1,
      img: require("@/assets/screenImg/commonImg/polyFirst.gif"),
      left: "130",
      top: "180",
    },
    {
      boxWidth: "70",
      boxHeight: "70",
      num: 3,
      img: require("@/assets/screenImg/commonImg/polyThird.gif"),
      left: "420",
      top: "300",
    },
  ],
});

const goBaseMap = (n) => {
  // 显示百度地图
  emits("nextMap", "GoBaseMap", n);
};

const initGaoxinMap = () => {};

defineExpose({ initGaoxinMap });
</script>

<style lang="scss" scoped>
.mapGaoxinBox {
  width: 100%;
  height: 100%;
  position: relative;
  .gaoxinNan {
    width: 632px;
    height: 632px;
    position: absolute;
    left: 175px;
    top: 8px;
  }
  .gaoxinXi {
    width: 191px;
    height: 301px;
    position: absolute;
    top: 55px;
    left: 50px;
  }
  .converItem {
    position: absolute;
    color: #ffda3a;
    cursor: pointer;
    background-size: 100%;
    text-align: center;
  }
}
</style>
